<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .header{
                height: 67px;
                border-bottom: 1px solid brown;
            }
            .header li{
                height: 67px;
                width: 60px;
                position: relative;
                float: left;
            }
            .header span{
                position: absolute;
                width: 37px;
                height: 37px;
                background: yellow;
                border-radius: 100px;
                left:14px;
                top:16px;
                text-align: center;
                line-height: 37px;
                margin: 5px auto;
                text-align: center;
            }
            .header .left{
                height: 67px;
                width: 307px;
                float: left;
            }
            .header .left h2{
                margin: 26px 0px 28px 35px;
            }
            .header p{
                float: right;
                margin: 22px 26px;
                font-size: 20px;
            }
            .banner{
                width: 1210px;
                height: 512px;
                margin: 25px auto;
            }
            .banner .left{
                width: 907px;
                height: 512px;
                float: left;
                background: url(images/s003.jpg);
            }
            .banner .top{
                width: 289px;
                height: 162px;
                float: right;
                background: url(images/s02.jpg);
            }
            .banner .mid{
                width: 289px;
                height: 162px;
                margin: 13px 0px;
                float: right;
                background: url(images/s03.jpg);
            }
            .banner .under{
                width: 289px;
                height: 162px;
                float: right;
                background: url(images/s04.jpg);
            }
            .list{
                width: 1210px;
                height: 36px;
                margin: 25px auto;
            }
            .list li{
                width: 130px;
                height: 34px;
                float: left;
                font-size: 19px;
                margin: auto 10px;
                padding: 6px 20px 2px 13px;
                border:1px solid #999999;
            }
            .bottom{
                width: 1210px;
                height: 970px;
                margin: 0px auto;
            }
            .con li{
                width: 286px;
                float: left;
                height: 326px;
                font-weight: normal;
                font-size: 17px;   
                margin: 0px 8px 0px;
            }
            .con li b{
                font-weight: normal;
                font-size: 17px;
                color: #737373;
                font-weight: normal;
            }
            .con li u{
                text-decoration: none;
                margin: 70px;
                font-size: 17px;
                color: #737373;
                font-weight: normal;
            }
            .con img{
                width: 289px;
            }
            .more{
                width: 1210px;
                height: 37px;
                margin: 11px auto 0px;
                background-color: cyan;
                text-align: center;
                line-height: 37px;
            }
            .footer{
                width: 1210px;
                height: 354px;
                margin: 0px auto;
            }
            .footer img{
                width: 162px;
                height: 49px;
                margin: 45px 8px 8px 2px;
                float: left;
            }
            .footer li span{
                margin: 38px 924px 0px 62px;
                float: left;
                font-size: 21px;
                color: #737373;
            }
            .footer .one span{
                margin: 30px 25px 20px 6px;
                float: left;
                font-size: 16px;
                color: #737373;
            }
    </style>
</head>
<body>
    <div class="header">
        <p>登录</p>
        <div class="left">
            <h2>三</h2>
        </div>
        <ul>
            <li>
                <span>赞</span> 
            </li >
            <li>
                <span>萌</span> 
            </li >
            <li>
                <span>哈</span> 
            </li >
            <li>
                <span>艹</span> 
            </li >
            <li>
                <span>买</span> 
            </li >
        </ul>
    </div>
    <div class="banner">
        <div class="left"></div>
        <div class="top"></div>
        <div class="mid"></div>
        <div class="under"></div>
        </div>
    <ul class="list">
        <li>最新</li>
        <li>最热</li>
        <li>热议</li>
        <li>随机</li>
    </ul>
    <div class="bottom">
    <ul class="con">
        <li>
            <img src="images/i01.jpg" alt="">
            <span>用水才能擦去笔记，它只想保护好设计师的创意</span>
            <br><br>
            <b>2小时前</b>
            <u>122</u>
        </li>
        <li>
            <img src="images/i02.jpg" alt="">
            <span>马桶刷也要有优雅的姿态</span>
            <br><br><br>
            <b>3小时前</b>
            <u>108</u>
        </li>
        <li>
            <img src="images/i03.jpg" alt="">
            <span>健身也走科技范，你以为这仅仅只是个瑜伽垫？</span>
            <br><br>
            <b>16小时前</b>
            <u>407</u>
        </li>
        <li>
            <img src="images/i04.jpg" alt="">
            <span>牙缝清洁怎么办？牙签牙线都过时了，用刷子刷吧</span>
            <br><br>
            <b>16小时前</b>
            <u>640</u>
        </li>
        <li>
            <img src="images/i05.jpg" alt="">
            <span>矮怎么了？照样能拿到书架顶端的书</span>
            <br><br><br>
            <b>18小时前</b>
            <u>534</u>
        </li>
        <li>
            <img src="images/i06.png" alt="">
            <span>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</span>
            <br><br>
            <b>19小时前</b>
            <u>1064</u>
        </li>
        <li>
            <img src="images/i07.png" alt="">
            <span>中国国际设计节PK世界工业设计大会，哪个更棒？</span>
            <br><br>
            <b>20小时前</b>
            <u>402</u>
        </li>
        <li>
            <img src="images/i08.jpg" alt="">
            <span>首届世界工业设计大会开在家门口杭州，中国设计师们燥起来</span>
            <br><br>
            <b>23小时前</b>
            <u>303</u>
        </li>
        <li>
            <img src="images/i09.jpg" alt="">
            <span>窝在北方的暖炉里，你应该需要一个散热阀门？</span>
            <br><br>
            <b>1天前</b>
            <u>479</u>
        </li>
        <li>
            <img src="images/i10.jpg" alt="">
            <span>废纸打造的铅笔，像是一朵朵落入凡间的花</span>
            <br><br>
            <b>2天前</b>
            <u>533</u>
        </li>
        <li>
            <img src="images/i11.jpg" alt="">
            <span>依靠在毯子上，这件事听着就让人舒坦</span>
            <br><br>
            <b>2天前</b>
            <u>463</u>
        </li>
        <li>
            <img src="images/i12.jpg" alt="">
            <span>别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就能变</span>
            <br><br>
            <b>2天前</b>
            <u>540</u>
        </li>
    </ul>
        </div>
    <p class="more">太快了吧,慢慢来:)</p>
        <div class="footer">
            <ul>
                <li>
                    <span>合作伙伴</span>
                </li>
                <li><img src="images/x01.png" alt=""></li>
                <li><img src="images/x02.png" alt=""></li>
                <li><img src="images/x03.png" alt=""></li>
                <li><img src="images/x04.png" alt=""></li>
                <li><img src="images/x05.png" alt=""></li>
                <li><img src="images/x06.png" alt=""></li>
                <li><img src="images/x07.jpg" alt=""></li>
                <li>
                    <span>友情链接</span>
                </li>
                <li class="one">
                    <span>广州城建职业学院</span>
                    <span>20软件技术2班</span>
                    <span>一位靓仔出品</span>
                </li>
            </ul>
        </div>
</body>
</html>